import React from 'react'
import {  TextInput, View, Divider, Button, Text, Spinner } from '@shoutem/ui'
import UserInfo from './UserInfo'

const Login = ({ loginPress, logining , loginError, isLogined}) => {
  if (isLogined) {
    return (<UserInfo/>)
  }
  return (
    <View styleName="vertical flexible" style={{marginTop:100}}>
      {
        logining ? <Spinner /> : null
      }
      <TextInput
        placeholder={'用户名'}
        autoCapitalize = {'none'}
        onChangeText={(username) => this.username = username.trim()}
      />
      <Divider styleName="line" />
      <TextInput placeholder={'密码'} secureTextEntry
        autoCapitalize = {'none'}
        onChangeText={(password) => this.password = password.trim()}
      />
      <Divider styleName="line" />
      <View styleName="horizontal pace-between" style={{marginTop:20}}>
        <Button
          styleName="confirmation"
          onPress={() => loginPress(this.username, this.password)}
        >
          <Text>登   录</Text>
        </Button>

        <Button styleName="confirmation dark">
          <Text>注   册</Text>
        </Button>
      </View>
    </View>
  )
}

export default Login
